<template>
  <div>
    <a-descriptions bordered :column="4">
      <a-descriptions-item label="case编号" :span="2">
        {{ caseInfo.caseNo }}
      </a-descriptions-item>
      <a-descriptions-item label="case信息" :span="2">
        {{ caseInfo.caseInfo }}
      </a-descriptions-item>
      <a-descriptions-item label="申请人">
        {{ caseInfo.createBy }}
      </a-descriptions-item>
      <a-descriptions-item label="申请日期">
        {{ caseInfo.createTime }}
      </a-descriptions-item>
      <a-descriptions-item label="开发负责人">
        {{ caseInfo.developPrincipal }}
      </a-descriptions-item>
      <a-descriptions-item label="投产日期">
        {{ caseInfo.operationDate }}
      </a-descriptions-item>
      <a-descriptions-item label="case描述">
        {{ caseInfo.caseDescription }}
      </a-descriptions-item>
    </a-descriptions>
    <a-steps :style="stepStyle" type="navigation" size="small" :current="caseInfo.caseStatus - 1">
      <a-step v-for="item in beforeStep" status="finish" size="small" :key="item.id" :title="item.statusName" />
      <a-step status="process" size="small" :title="caseStatus[caseInfo.caseStatus - 1].statusName" ><a-icon slot="icon" type="loading" /></a-step>
      <a-step v-for="item in afterStep" status="wait" size="small" :key="item.id" :title="item.statusName" />
    </a-steps>
  </div>
</template>

<script>
export default {
  name: 'caseInfoDescription',
  props: {
    caseInfo: {
      type: Object
    },
    caseStatus: {
      type: Array
    }
  },
  data() {
    return {
      stepStyle: {
        marginBottom: '60px',
        boxShadow: '0px -1px 0 0 #e8e8e8 inset'
      }
    }
  },
  computed: {
    beforeStep() {
      let beforeStep = []
      for (let i = 0; i < this.caseInfo.caseStatus - 1; i++) {
        beforeStep.push(this.caseStatus[i])
      }
      return beforeStep
    },
    afterStep() {
      let afterStep = []
      for (let i = this.caseInfo.caseStatus; i < this.caseStatus.length; i++) {
        afterStep.push(this.caseStatus[i])
      }
      return afterStep
    }
  },
  methods: {}
}
</script>

<style scoped lang="less"></style>
